<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素属性</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>

    <style>
        .active {
            background-color: black;
            color: white;
        }
    </style>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        const arr = [
            "抽中华", "喝茅台", "发表情包"
        ]

        // 标记当前点击的序号
        let activeIndex = 0

        let myJsx = createJsx(arr)
        function createJsx(arr){
            return arr.map(
                (item,index)=>(
                    <p 
                    key={index+item}
                    className={index===activeIndex?'active':''}
                    onClick={()=>{
                        console.log(index);
                        activeIndex = index
                        
                        // 状态变化后 重新渲染视图
                        myJsx = createJsx(arr)
                        ReactDOM.render(myJsx, document.querySelector("#root"))
                    }}
                    >{item}</p>
                )
            )
        }

        ReactDOM.render(myJsx, document.querySelector("#root"))
    </script>
</body>

</html>